<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>电影模块</el-breadcrumb-item>
      <el-breadcrumb-item>演员管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入演员名称" clearable v-model="actorName" @clear="searchActor">
            <el-button slot="append" icon="el-icon-search" @click="searchActor"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <!-- 点击后去执行 addDialogVisible 弹出添加模态框 -->
          <el-button type="primary" @click="addDialogVisible = true">添加演员</el-button>
        </el-col>
      </el-row>

      <el-table :data="actorList" border stripe>
        <el-table-column label="电影ID" width="70" prop="actorId"></el-table-column>
        <el-table-column label="演员姓名" prop="actorName"></el-table-column>

        <el-table-column label="演员图片" prop="actorImg">
          <template slot-scope="sc">
            <img :src="sc.row.actorImg" width="80" height="100" />
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <!-- 拿到整行数据  scope.row可以将整行所有的参数(整个对象的值)来进行传递-->
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="showEditDialog(scope.row)">修改</el-button>
            <el-button type="danger" size="mini" @click="removeActorById(scope.row.actorId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>

    <!--    添加模态框     模态框绑定:visible.sync -->
    <el-dialog title="添加电影" :visible.sync="addDialogVisible" width="50%" @close="addActorFormClose">
      <!-- :label-position 对齐-->
      <!-- ref 指定-->
      <!-- :model 绑定数据-->
      <!-- label-width 标签间距 -->
      <!-- :rules 绑定验证规则   1.设置完成后验证规则会去找命名方法中的所有既定规则-->
      <el-form
        :model="addActorForm"
        :rules="addActorFormRules"
        ref="addActorFormRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- 验证的数组一定要写在父级标签的一行,否则验证方法无效   (可以通过input标签前方是否有红色*号 来进行判断) -->
        <el-form-item label="演员名称" prop="actorName">
          <el-input v-model="addActorForm.actorName"></el-input>
        </el-form-item>

        <el-form-item label="图片">
          <!--<el-input v-model="addCinemaForm.cinemaImg"></el-input>-->
          <!-- :multiple=false 不要多文件上传 -->
          <!-- :auto-upload=false 不要选择文件后自动上传 -->
          <!-- :limit 限制1个 -->
          <!-- list-type 传图后的样式，可以是text/picture/picture-card -->
          <el-upload
            class="upload-demo"
            accept=".jpg, .jpeg, .png, .gif"
            :multiple="false"
            :auto-upload="false"
            action=""
            :on-change="handleChange"
            :on-remove="handleRemove"
            :file-list="fileList"
            :limit="1"
            list-type="picture-card"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传"gif", "jpg", "jpeg", "png"文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addActor">确 定</el-button>
        <el-button @click="addDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 修改模态框 -->
    <el-dialog title="修改权限" :visible.sync="editDialogVisible" width="50%" @close="editDepartFormClose">
      <!-- 修改模态框-->
      <el-form
        :model="editActorForm"
        :rules="editActorFormRules"
        ref="editActorFormRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="演员名称" prop="actorName">
          <el-input v-model="editActorForm.actorName"></el-input>
        </el-form-item>

        <el-form-item label="图片">
          <!--<el-input v-model="updateCinemaForm.cinemaImg"></el-input>-->
          <!-- :multiple=false 不要多文件上传 -->
          <!-- :auto-upload=false 不要选择文件后自动上传 -->
          <!-- :limit 限制1个 -->
          <!-- list-type 传图后的样式，可以是text/picture/picture-card -->
          <el-row :gutter="10">
            <el-col :span="10">
              <el-image style="width: 100px; height: 100px" :src="editActorForm.actorImg"> </el-image>
            </el-col>
            <el-col :span="13">
              <el-upload
                class="upload-demo"
                accept=".jpg, .jpeg, .png, .gif"
                :multiple="false"
                :auto-upload="false"
                action=""
                :on-change="handleChange"
                :on-remove="handleRemove"
                :file-list="fileList"
                :limit="1"
                list-type="picture"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  只能上传"gif", "jpg", "jpeg", "png"文件，且不超过500kb。如果没有上传，将会使用以下地址
                </div>
              </el-upload>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editPermission">确 定</el-button>
        <el-button @click="editDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "DogmovieActor",

  // components: { ComponentName },

  // directives: { DirectiveName },

  data() {
    return {
      actorName: "",
      pageNum: 1,
      pageSize: 5,
      actorList: [],
      total: 0,
      addDialogVisible: false, //模态框初始状态设置为关闭
      editDialogVisible: false,
      fileImg: "",

      //由于要上传图片，实际要FormData传参
      addActorParam: {},
      //由于要上传图片，实际要FormData传参
      updateActorParam: {},

      addActorForm: {
        actorName: "",
      },
      editActorForm: {
        actorId: 0,
        actorName: "",
        actorImg: "",
      },
      addActorFormRules: {
        actorName: [
          { required: true, message: "请输入演员名称", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "演员名称在2-20個字符之間",
            trigger: "blur",
          },
        ],
      },
      editActorFormRules: {
        actorName: [
          { required: true, message: "请输入演员名称", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "演员名称在2-20個字符之間",
            trigger: "blur",
          },
        ],
      },
    }
  },

  mounted() {},

  methods: {
    //图片改变
    handleChange(file, filesList) {
      // console.log(file);
      this.fileImg = file
      // this.addCinemaParam = new FormData();
      // this.addCinemaParam.append('fileImg', file.raw, file.name);
      // console.log(this.addCinemaParam);
    },
    //图片移除
    handleRemove(file, filesList) {
      this.addCinemaParam.delete("fileImg")
    },
    //删除
    async removeActorById(id) {
      //如果要使用弹出提示框 需要在方法上添加、async(异步)关键字后 才可以使用(await)等待关键字
      const res = await this.$confirm("此操作将永久删除该权限, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch((err) => err)

      //选择确定是  返回值为:confirm
      if ("confirm" === res) {
        this.$api.actor
          .deleteActor(id)
          .then((res) => {
            this.$message.success("删除成功")
            this.searchActor()
          })
          .catch((err) => {
            this.$message.error("服务端异常，请联系管理员")
          })
      } else {
        this.$message.info("取消删除")
      }
    },

    //添加
    addActor() {
      this.$refs.addActorFormRef.validate((valid) => {
        if (!valid) return

        this.addActorParam = new FormData()
        //循环把表单里的键值和对应的value加入FormData里
        // console.log(this.addCinemaParam);

        this.addActorParam.append("actorName", this.addActorForm.actorName)
        if (this.fileImg != "") {
          //把图片加入FormData里
          this.addActorParam.append("fileImg", this.fileImg.raw, this.fileImg.name)
        }

        this.$api.actor.actorAdd(this.addActorParam).then((res) => {
          this.addDialogVisible = false
          if (res.data.code == 200) {
            this.$message.success("添加成功")
            this.searchActor()
          } else {
            this.$message.error("服务端异常，请联系管理员")
          }
        })
      })
    },

    //修改
    editPermission() {
      this.$refs.editActorFormRef.validate((valid) => {
        //通过验证规则,全部通过时,返回ture
        if (!valid) return


         this.updateActorParam = new FormData()
        //循环把表单里的键值和对应的value加入FormData里
        // console.log(this.addCinemaParam);

        this.updateActorParam.append("actorId", this.editActorForm.actorId)
        this.updateActorParam.append("actorName", this.editActorForm.actorName)

        if (this.fileImg != "") {
          //把图片加入FormData里
          this.updateActorParam.append("fileImg", this.fileImg.raw, this.fileImg.name)
        }




        this.$api.actor.updateActor(this.updateActorParam).then((res) => {
          this.editDialogVisible = false
          if (res.data.code == 200) {
            this.$message.success("修改成功")
            this.searchActor()
          } else {
            this.$message.error("服务端异常，请联系管理员")
          }
        })
      })
    },
    showEditDialog(row) {
      /*点击修改事件之后将模态框状态调整为true */
      this.editDialogVisible = true
      this.editActorForm.actorId = row.actorId
      this.editActorForm.actorName = row.actorName
      this.editActorForm.actorImg = row.actorImg
    },
    //监听模态框 使用close方法  发生关闭时清空所有输入字符
    editDepartFormClose() {
      this.$refs.editActorFormRef.resetFields()
    },
    //关闭模态框时 清空所有输入框内信息
    addActorFormClose() {
      this.$refs.addActorFormRef.resetFields()
    },

    getactorList() {
      this.$api.actor
        .actorList({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          actorName: this.actorName,
        })
        .then((res) => {
          this.pageNum = res.data.pageNum
          this.pageSize = res.data.pageSize
          this.total = res.data.total
          this.actorList = res.data.list
        })
    },
    searchActor() {
      this.pageNum = 1
      this.pageSize = 10
      this.getactorList()
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize
      this.getactorList()
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage
      this.getactorList()
    },
    reloadData() {
      //查询 列表
      this.searchActor()
    },
  },
  created() {
    this.reloadData()
  },
}
</script>

<style lang="scss" scoped></style>
